<template>
    <div class="room-container">
      <div class="room-number">
        <!-- 这里根据用户信息随机生成房间号 -->
        <span>{{ roomNumber }}</span>
      </div>
      <div class="video-container">
        <div v-for="participant in participants" :key="participant.id" class="participant">
          <div class="video-wrapper">
            <video ref="localVideo" class="camera" autoplay muted></video>
            <video ref="screenShareVideo" class="screen-sharing" autoplay></video>
          </div>
          <p>{{ participant.name }}</p>
        </div>
      </div>
      <div class="right-section">
        <!-- 竖排按钮 -->
        <button @click="startScreenSharing" style="background-color: #007BFF; color: white; border: none; padding: 10px 20px; margin-bottom: 10px; border-radius: 5px;">共享屏幕</button>
        <button @click="startCamera" style="background-color: #007BFF; color: white; border: none; padding: 10px 20px; margin-bottom: 10px; border-radius: 5px;">开启摄像头</button>
        <button @click="stopCamera" style="background-color: #007BFF; color: white; border: none; padding: 10px 20px; margin-bottom: 10px; border-radius: 5px;">关闭摄像头</button>
        <button @click="startMicrophone" style="background-color: #007BFF; color: white; border: none; padding: 10px 20px; margin-bottom: 10px; border-radius: 5px;">开启麦克风</button>
        <button @click="stopMicrophone" style="background-color: #007BFF; color: white; border: none; padding: 10px 20px; margin-bottom: 10px; border-radius: 5px;">关闭麦克风</button>
      </div>
      <div class="bottom-right-section" style="background-color: #f8f9fa; padding: 10px; border-radius: 5px;">
        <!-- 显示进入人数和人员信息 -->
        <p style="font-size: 16px; color: #333;">当前进入人数: {{ participantCount }}</p>
        <ul style="list-style-type: none; padding: 0;">
          <li v-for="participant in participants" :key="participant.id" style="font-size: 14px; color: #666; margin-bottom: 5px;">{{ participant.name }}</li>
        </ul>
      </div>
    </div>
  </template>
  <style scoped>
  .room-container {
    position: relative;
    width: 100%;
    height: calc(100vh + (var(--participant-count) - 3) * 50px); 
    background-color: white; /* 添加白色背景 */
    border-radius: 10px; /* 添加圆角 */
  } 
  .room-number {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .video-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 10px;
    top: 50px;
    width: 60%;
    height: 80%;
  }
  .participant {
    margin-bottom: 20px;
  }
  .video-wrapper {
    display: flex;
  }
  .camera,
  .screen-sharing {
    border: 1px solid #ccc;
    margin-right: 10px;
    width: 50%;
    height: auto;
  }
  .right-section {
    position: absolute;
    right: 10px;
    top: 50px;
    display: flex;
    flex-direction: column;
  }
  .right-section button {
    margin-bottom: 10px;
  }
  .bottom-right-section {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  </style>

  <script setup>
  import { ref } from 'vue';

  // 模拟随机生成房间号
  const roomNumber = ref(Math.floor(Math.random() * 1000000));

  // 模拟进入的人数和人员信息
  const participantCount = ref(3);
  const participants = ref([
    { id: 1, name: '用户1' },
    { id: 2, name: '用户2' },
    { id: 3, name: '用户3' }
  ]);

  // 定义CSS变量
  const root = document.documentElement;
  root.style.setProperty('--participant-count', participantCount.value);

  const localVideo = ref(null);
  const screenShareVideo = ref(null);

  const startCamera = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
      localVideo.value.srcObject = stream;
    } catch (error) {
      console.error('无法打开摄像头:', error);
    }
  };

  const startMicrophone = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true });
      // 这里可以根据需求将音频流绑定到相应的元素上
    } catch (error) {
      console.error('无法打开麦克风:', error);
    }
  };

  const startScreenSharing = async () => {
    try {
      const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
      screenShareVideo.value.srcObject = screenStream;
    } catch (error) {
      console.error('无法开始屏幕共享:', error);
    }
  };

  const stopCamera = () => {
    if (localVideo.value && localVideo.value.srcObject) {
      const tracks = localVideo.value.srcObject.getTracks();
      tracks.forEach(track => track.stop());
      localVideo.value.srcObject = null;
    }
  };

  const stopMicrophone = () => {
    // 这里需要根据实际情况找到绑定音频流的元素，假设之前已经绑定到某个元素上
    // 例如：const audioElement = ...
    // if (audioElement && audioElement.srcObject) {
    //   const tracks = audioElement.srcObject.getTracks();
    //   tracks.forEach(track => track.stop());
    //   audioElement.srcObject = null;
    // }
    console.log('关闭麦克风逻辑待完善，需根据实际音频流绑定情况实现');
  };
  // 监听participantCount的变化，更新CSS变量
  participantCount.value = participants.value.length;
  root.style.setProperty('--participant-count', participantCount.value);
  </script>